<template>
  <div class="home-protect">
    <!-- 小球 
    <div class="home-protect-pellet"></div>-->
    <!-- 地面一 
    <div class="home-protect-ground"></div>
    <div class="home-protect-ground"></div>
    <div class="home-protect-ground"></div>-->
    <div class="home-protect-ground-slogan">预防新冠肺炎病毒 你做到了吗?</div>
    <!-- 电视 -->
    <div class="home-protect-head">
      <h3>预防新冠肺炎病毒</h3>
      <p>新病毒，类花冠。人传人，易感染。老弱病，高风险。严防控，保安全。</p>
    </div>
    <!-- 书签 -->
    <div class="home-protect-main">
      <ol class="home-protect-main-wash flag">
        <div class="home-protect-main-Interface"></div>
        <div class="circle"></div>
        <h3>七步洗手法</h3>
        <div ref="washImg" class="wash-img" :class="[washImg]"></div>
        <li v-for="(item, index) in olLi" :key="index" @mouseenter="enter(index)" @mouseleave="out">{{ item }}</li>
      </ol>
      <div class="home-protect-main-rect">
        <div class="home-protect-main-rect-line"></div>
        <div class="home-protect-main-Interface"></div>
        戴口罩，防传染。<br/>
        打喷嚏，遮口鼻。
      </div>
    </div>
    <div class="quarantine-virus">
      <div class="quarantine-virus-text">减少出行<br>让病毒无路可走</div>
      <canvas ref="virus" width=400 height="200"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      olLi: ['掌心对掌心,相互揉搓', '掌心对手背,两手交叉揉搓', '掌心对掌心,十指交叉揉搓', '十指弯曲紧扣,转动揉搓', '拇指卧在掌心,转动揉搓', '指尖在掌心揉搓', '清洁手腕'],
      washImg: ''
    }
  },
  methods: {
    // 鼠标移入li
    enter(index) {
      //var washImg = this.$refs.washImg;
      this.washImg = 'wash-img' + (index + 1);
    },
    // 鼠标移出li
    out() {
      this.washImg = '';
    },
    // 病毒
    viruses() {
      var This = this;
      var ctx, maxX, maxY;
      // 所有的病毒
      var viruss = [];
      // 病毒对象
      function Virus() {};
      Virus.prototype = {
        // 设置随机函数
        random(min, max) {
          return Math.random() * (max - min) + min;
        },
        // 病毒数据
        init() {
          ctx = this.ctx =  This.$refs.virus.getContext('2d');
          var obj = This.$refs.virus; // 获取画布
          maxX = this.maxX = obj.offsetWidth; // 元素宽度
          maxY = this.maxY = obj.offsetHeight; // 元素高度
          this.x = this.random(0, this.maxX); // 病毒x坐标
          this.y = this.random(0, this.maxY); // 病毒y坐标
          this.r = this.random(2, 4); // 病毒半径
          this.color = '000'; // 病毒颜色
          this.vx = this.random(-0.5, 0.5); /*病毒移动速度*/
          this.vy = this.random(-0.5, 0.5);
        },
        // 创建病毒函数
        draw() {
          var ctx = this.ctx;
          ctx.beginPath();
          ctx.fillStyle = this.color;
          ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
          // ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
          ctx.fill();
        },
        // 病毒移动函数
        move() {
          this.x += this.vx;
          this.y += this.vy;
          if (this.x - this.r < 0 || this.x + this.r > this.maxX) {
            this.vx = -this.vx;
          }
          if (this.y - this.r < 0 || this.y + this.r > this.maxY) {
            this.vy = -this.vy;
          }
          this.draw(this.ctx);
        }
      }
      // 循环多个病毒
      function multiple(num) {
        for (var i=0; i<num; i++) {
          var virus = new Virus();
          virus.init();
          virus.draw();
          viruss.push(virus);
        }
      }
      multiple(50);
      // 让病毒动起来
      setInterval(function(){
        ctx.clearRect(0, 0, maxX, maxY);
        for (var i = 0, len = viruss.length; i < len; i++) {
          viruss[i].move();
        }
      },1000/60)
    }
  },
  mounted () {
    this.viruses();
  }
}
</script>

<style scoped>
.home-protect {
  position: absolute;
  width: 100%;
  height: 100%;
}
.home-protect-head {
  padding: 0 20px;
  width: 100%;
  height: 60px;
  border-bottom: 4px solid #793c3c;
  box-sizing: border-box;
}
.home-protect-head h3 {
  text-align: left;
  line-height: 10px;
}
.home-protect-main {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 书签与电视连接口 */
.home-protect-main-Interface {
  position: absolute;
  left: calc(50% - 4px);
  top: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #793c3c;
}

/* 书签 */
.home-protect-main-wash {
  padding-bottom: 24px;
  position: absolute;
  left: 160px; top: 50px;
  width: 270px;
  /* background-color: rgba(0, 0, 0, .5); */
  text-align: center;
  list-style-type: decimal-leading-zero;
  list-style-position: inside;
  border: 4px solid #793c3c;
  animation: wash 1s ease-in-out;
  animation-delay: 2s;
}
.home-protect-main-wash:before {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  width: 15px;
  height: 15px;
  background-color: #000;
  border-radius: 50%;
}
.home-protect-main-wash:after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: -54px;
  width: 2px;
  height: 54px;
  background-color: #793c3c;
}
.home-protect-main-wash .wash-img {
  display: inline-block;
  width: 160px;
  height: 160px;
  background-image: url(../../assets/images/wash-1.jpg);
  /* background-color: #000; */
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  border: 1px solid #793c3c;
}
.home-protect-main-wash .wash-img1 {
  background-image: url(../../assets/images/wash.png);
  background-position: 0 0;
  background-size: auto;
}
.home-protect-main-wash .wash-img2 {
  background-image: url(../../assets/images/wash.png);
  background-position: -190px 0;
  background-size: auto;
}
.home-protect-main-wash .wash-img3 {
  background-image: url(../../assets/images/wash.png);
  background-position: -380px 0;
  background-size: auto;
}
.home-protect-main-wash .wash-img4 {
  background-image: url(../../assets/images/wash.png);
  background-position: -570px 0;
  background-size: auto;
}
.home-protect-main-wash .wash-img5 {
  background-image: url(../../assets/images/wash.png);
  background-position: 0 -190px;
  background-size: auto;
}
.home-protect-main-wash .wash-img6 {
  background-image: url(../../assets/images/wash.png);
  background-position: -190px -190px;
  background-size: auto;
}
.home-protect-main-wash .wash-img7 {
  background-image: url(../../assets/images/wash.png);
  background-position: -380px -190px;
  background-size: auto;
}
.home-protect-main-wash li {
  margin: 0 40px;
  padding-top: 20px;
  padding-bottom: 2px;
  font-size: 14px;
  border-bottom: 1px solid #7cdaca;
  cursor: pointer;
  /* color: #fff; */
}

/* 电视 */
.home-protect-main-rect {
  position: absolute;
  right: 160px; top: 50px;
  padding: 20px;
  border: 4px solid #793c3c;
  font-size: 26px;
  border-radius: 10px;
}
.home-protect-main-rect-line {
  position: absolute;
  left: calc(50% - 1px);
  top: -54px;
  width: 2px;
  height: 54px;
  background-color: #793c3c;
}
.home-protect-main-rect:before,
.home-protect-main-rect:after
{
  content: "";
  position: absolute;
  top: -30px;
  width: 4px;
  height: 30px;
  background: #793c3c;
}
.home-protect-main-rect:before {
  left: 50px;
  transform: rotate(-30deg);
}
.home-protect-main-rect:after {
  right: 50px;
  transform: rotate(30deg);
}

/* 隔离病毒 */
.quarantine-virus {
  position: absolute;
  left: 0; top: 300px; right: 0;
  margin: auto;
  width: 400px;
  height: 200px;
  border: 4px solid #793c3c;
  border-radius: 10px;
}
.quarantine-virus-text {
  position: absolute;
  left: calc(50% - 100px);
  top: -50px;
  width: 200px;
  height: 40px;
  font-weight: bold;
}
.quarantine-virus::before,
.quarantine-virus::after {
  content: '';
  position: absolute;
  top: -226px;
  width: 2px;
  height: 226px;
  background: #793c3c;
}
.quarantine-virus::before {
  left: 100px;
}
.quarantine-virus::after {
  right: 100px;
}
.home-protect canvas {
  /* position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto; */
  /* width: 400px;
  height: 200px; */
  /* border: 1px solid #000; */
}

.home-protect-ground-slogan {
  position: absolute;
  left: calc(50% - 200px);
  top: 700px;
  width: 400px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  border-bottom: 1px solid #000;
}
</style>
